<template>
    <el-scrollbar>
        <el-menu :v-loading="loading" :default-active="activeindex" :router="true" :default-openeds="defaultOpenedMenus">
            <template v-for="item in menuItems" :key="item.path">
                <el-sub-menu v-if="item.children && item.children.length" :index="item.id">
                    <template #title>
                        <span style="font-size: 16px">{{ menuid == 1 ? $t(item.name) : item.name }}</span>
                    </template>
                    <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" :style="getMenuItemStyle(child.id)">
                        {{ menuid == 1 ? $t(child.name) : child.name }}
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="item.path" :style="getMenuItemStyle(item.id)">
                    <span style="font-size: 16px">{{ menuid == 1 ? $t(item.name) : item.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { httpSend } from '@/utils/api';
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
import { toRef, computed, ref, watch, onMounted, onBeforeUnmount, reactive } from 'vue';
//@ts-ignore
import Menu from '@/assets/menu.json';
//@ts-ignore
import { usetabsStore } from '@/store';
import { useRouter } from 'vue-router';
const loading = ref(false); //页面加载状态
const router = useRouter();
const tabStore = usetabsStore() as any;
const defaultOpenedMenus = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
let activeindex = ref(tabStore.activetabindex);
let menuItems = ref(Menu);
const menuid = ref(1); //默认菜单ID为1，如果是其它自定义菜单，则不翻译

//监听
watch(
    () => tabStore.activetabindex,
    (newValue) => {
        activeindex.value = newValue;
    }
);

onMounted(() => {
    gettablist();
});

const gettablist = async () => {
    loading.value = true;
    const res = await httpSend('LoadMenu', {}, false);
    if (res && res.data && res.data.length>0) {
        menuid.value = res.data[0]['id'];
        let data = JSON.parse(res.data[0]['datatext']);
        // 如果数据依然是字符串，则需要再解析一次
        if (typeof data === 'string') {
            data = JSON.parse(data); // 第二次解析
        }
        if (data) {
            menuItems.value = data;
        }
    } else {
    }
    tabStore.setmenuid(menuid.value);
    tabStore.setmenu(flattenTree(menuItems.value));
    loading.value = false;
};

const handleSelect = (item: any) => {
    router.push(item.path);
};

// 获取每个菜单项的背景颜色
const getMenuItemStyle = (index) => {
    return {
        backgroundColor: tabStore.activetabindex === index ? '#014fa3' : '#2588ed',
        // color: activeindex.value === index ? 'white' : 'black' #2588ed
    };
};

//处理自定义菜单的数据用，解析自定义菜单的数据转成一维数组
function flattenTree(tree, parentid = null, isover = false) {
    return tree.reduce((acc, item) => {
        acc.push({
            id: item.id,
            name: item.name,
            path: item.path,
        });
        if (item.children && item.children.length && !isover) {
            acc.push(...flattenTree(item.children, item.id, true));
        }
        return acc;
    }, []);
}

</script>

<style scoped>
.el-menu {
    background: linear-gradient(94deg, #1b87e0, #2bdbdb);
    border-right: 1px solid var(--el-menu-border-color);
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: relative;
    --el-menu-active-color: #ffffff;
    --el-menu-hover-bg-color: #0474eb;
    --el-menu-text-color: #ffffff;
}
.el-menu-item:hover {
    background-color: #0474eb;
}

.el-sub-menu .el-menu-item {
    height: var(--el-menu-sub-item-height);
    line-height: var(--el-menu-sub-item-height);
    background: #0081cf;
}
</style>
